<template>
	<div class="container">
		<div class="one-box" v-for="item,index of list" :key="item.id">
			<span>{{index+1}}</span>
			<input :ref="index+'box'" type="checkbox"
			       :checked="list[index].choose==choose" @change="check(index)"/>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Checkboxes',
		props:{
			list:Array,
			choose:Number
		},
		methods:{
			check(index){
				let choose = this.$refs[index+'box'][0].checked?this.choose:0;
				this.$store.commit('setChoose',{index,choose});
			}
		}
	}
</script>

<style scoped>
	.container{
		display: block;
		width: 240px;
	}
	.one-box{
		width: 80px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		float: left;
	}
	input{
		zoom: 200%;
	}
</style>
